/**
 * AI助手面板
 * 提供AI续写、内容优化等智能辅助功能
 */

import React, { useMemo } from 'react'
import { Card, Button, Space, Typography, Tag, Divider, Alert } from 'antd'
import { RobotOutlined, ThunderboltOutlined, CheckCircleOutlined, WarningOutlined } from '@ant-design/icons'
import { hasAPIKey, getAIConfig } from '../../../services/ai'

const { Text, Paragraph } = Typography

export interface AIAssistantPanelProps {
  onAIContinue: () => void
  isGenerating: boolean
}

export const AIAssistantPanel: React.FC<AIAssistantPanelProps> = ({
  onAIContinue,
  isGenerating
}) => {
  // 使用 useMemo 缓存配置,避免每次渲染都读取 localStorage
  const hasConfig = useMemo(() => hasAPIKey(), [])
  const config = useMemo(() => getAIConfig(), [])

  return (
    <Card
      title={
        <Space>
          <RobotOutlined />
          <span>AI助手</span>
          {hasConfig && <Tag color="success">已配置</Tag>}
        </Space>
      }
      variant="borderless"
    >
      {!hasConfig ? (
        <>
          <Alert
            message="AI服务未配置"
            description="请点击右上角的【AI设置】按钮配置OpenAI或硅基流动服务，即可使用AI助手功能"
            type="warning"
            showIcon
            icon={<WarningOutlined />}
            style={{ marginBottom: 16 }}
          />
          <Paragraph type="secondary">
            AI助手可以帮助你：
          </Paragraph>
          <ul style={{ paddingLeft: 20, marginBottom: 0 }}>
            <li>智能续写文章内容</li>
            <li>保持文风一致连贯</li>
            <li>提高写作效率</li>
          </ul>
        </>
      ) : (
        <>
          <Space direction="vertical" style={{ width: '100%' }} size="small">
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <CheckCircleOutlined style={{ color: '#52c41a' }} />
              <Text type="secondary">服务商:</Text>
              <Text strong>
                {config?.apiBaseUrl?.includes('siliconflow')
                  ? '硅基流动'
                  : config?.apiBaseUrl?.includes('openai')
                  ? 'OpenAI'
                  : config?.apiBaseUrl
                  ? '自定义'
                  : 'OpenAI'}
              </Text>
            </div>

            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <ThunderboltOutlined style={{ color: '#1890ff' }} />
              <Text type="secondary">模型:</Text>
              <Text strong>{config?.model || 'gpt-3.5-turbo'}</Text>
            </div>
          </Space>

          <Divider style={{ margin: '16px 0' }} />

          <Space direction="vertical" style={{ width: '100%' }} size="middle">
            <Button
              block
              type="primary"
              size="large"
              icon={<RobotOutlined />}
              onClick={onAIContinue}
              loading={isGenerating}
            >
              {isGenerating ? 'AI生成中...' : 'AI续写'}
            </Button>

            <div style={{ fontSize: 12, color: '#8c8c8c' }}>
              <div>快捷键: Ctrl+Shift+A (Mac: Cmd+Shift+A)</div>
              <div style={{ marginTop: 4 }}>在编辑器中将光标放在需要续写的位置，然后点击按钮或使用快捷键</div>
            </div>
          </Space>

          <Divider style={{ margin: '16px 0' }} />

          <div style={{ fontSize: 12, color: '#8c8c8c' }}>
            <Text type="secondary">更多AI功能（规划中）：</Text>
            <ul style={{ paddingLeft: 20, marginTop: 8, marginBottom: 0 }}>
              <li>内容润色优化</li>
              <li>大纲自动生成</li>
              <li>摘要提取</li>
            </ul>
          </div>
        </>
      )}
    </Card>
  )
}
